<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>列表管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片区域 -->
		<el-card class="">
			<!-- 搜索与添加区域 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="one">
						<!-- clear方法为清空时，再次调用第一次渲染的方法 -->
						<el-button slot="append" icon="el-icon-search" @click="usersearch(queryInfo.query)"></el-button>
					</el-input>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
				</el-col>
			</el-row>

			<!-- 用户列表 -->
			<el-table :data="tableData" style="width: 100%" border stripe>
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="name" label="用户名"></el-table-column>
				<el-table-column prop="email" label="邮箱"></el-table-column>
				<el-table-column prop="mobile" label="电话"></el-table-column>
				<el-table-column prop="role_name" label="角色"></el-table-column>
				<el-table-column label="状态">
					<template v-slot="scope">
						<!-- {{scope.row}} -->
						<el-switch v-model="scope.row.role_state" @change="userstatechange(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template v-slot="scope">
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
						<!-- 删除按钮 -->
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeuser(scope.row.id)">
						</el-button>
						<!-- 分配角色按钮 -->
						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 4, 10]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>

		</el-card>

		<!-- 对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" center @close="addDialogcloseed">
			<!-- 内容主体区域 -->
			<!-- <span>需要注意的是内容是默认不居中的</span> -->

			<div>
				<el-form ref="addformref" :model="addform" label-width="70px" :rules="addformrules">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="addform.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userpassword" type="password">
						<el-input v-model="addform.userpassword"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="useremail">
						<el-input v-model="addform.useremail"></el-input>
					</el-form-item>
					<el-form-item label="手机" prop="usermobile">
						<el-input v-model="addform.usermobile"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</span>
		</el-dialog>



	</div>

</template>

<script>
	export default {
		data() {
			// 自定义效验邮箱与手机号
			var checkemail = (rule, value, callback) => {
				//验证邮箱
				const regemail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
				if (regemail.test(value)) {
					//合法邮箱
					return callback()
				} else {
					callback(new Error('请输入合法邮箱'))
				}

			}

			var checkmobile = (rule, value, callback) => {
				//验证手机号
				const regmobile = /^1[3|4|5|7|8][0-9]{9}$/
				if ((regmobile.test(value))) {
					//合法手机号
					return callback()
				} else {
					callback(new Error('请输入合法手机号'))
				}

			}


			return {
				// 控制对话框的显示与隐藏   false不显示true显示
				addDialogVisible: false,
				// 添加用户
				addform: {
					username: "",
					userpassword: "",
					useremail: "",
					usermobile: ""
				},

				// 限制
				addformrules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 11,
							message: '长度在 3 到 11 个字符',
							trigger: 'blur'
						}
					],
					userpassword: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 15,
							message: '长度在 6 到 15 个字符',
							trigger: 'blur'
						}
					],
					useremail: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: checkemail,
							trigger: 'blur'
						}


					],
					usermobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							validator: checkmobile,
							trigger: 'blur'
						}
					]

				},


				queryInfo: {
					// 搜索值
					query: '',
					// 当前的页数
					pagenum: 1,
					// 当前每页显示多少条
					pagesize: 2
				},
				total: 0,


				tableData: [{
					id: 1,
					type: "1",
					name: '小兮',
					email: '74520@qq.com',
					mobile: '12345678910',
					role_name: '超级管理员',
					role_state: true,
					address: '江西宜春'
				}, {
					id: 2,
					name: '李四',
					email: '12345678@qq.com',
					mobile: '15220363654',
					role_name: '管理员',
					role_state: false,
					address: '江西九江'
				}, {
					id: 3,
					name: '王二',
					email: '7895436@qq.com',
					mobile: '13244475668',
					role_name: '管理员',
					role_state: false,
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					id: 4,
					name: '小花',
					email: '1137456231@qq.com',
					mobile: '15223596438',
					role_name: '管理员',
					role_state: true,
					address: '上海市普陀区金沙江路 1518 弄'
				}]
			}

		},
		created() {
			// console.log(this.tableData.length)
			this.total = this.tableData.length
		},

		methods: {
			//监听pagesize改变的事件
			handleSizeChange(newsize) {
				console.log(newsize)
				this.queryInfo.pagesize = newsize

				// this.tableData = this.tableData
				// ***调用请求数据的方法
				// 调用方法 this.方法名
			},
			// 监听页码值改变的事件
			handleCurrentChange(newpage) {
				console.log(newpage)
				this.queryInfo.pagenum = newpage
				// ***调用请求数据的方法
				// 调用方法 this.方法名
			},
			// 改变用户状态
			async userstatechange(userinfo) {
				console.log(userinfo)

				// const res = await this.$http.put(`api/${userinfo.全有}/${userinfo.role_state}`)
				// 	if(res.code!=200){
				// 		userinfo.role_state = !userinfo.role_state
				// 		return this.$message.error('更新用户失败')
				// 	}else{
				// return this.$message.success('更新用户成功')
				// }
			},
			usersearch(query) {
				console.log(query)
			},
			one() {

			},
			// 取消弹框时清除规则
			addDialogcloseed() {
				this.$refs.addformref.resetFields()
			},
			// 点击按钮，添加新用户
			addUser() {
				this.$refs.addformref.validate(async valid => {
					// console.log(valid)
					if (!valid) return
					//可以发起添加用户的网络请求
					// 发送请求
					// const {data:res} = await this.$http.post('接口名',this.addform)

					// if("不成功"){
					// 	this.$message.error("添加用户失败！")
					// }else{
					// 	this.$message.error("添加用户成功！")
					// }


					//隐藏添加用户的对话框
					this.addDialogVisible = false
					//刷新
					// 重新调用接口
					// this.调用接口方法名    || 
				})
			},
			// 根据id删除对应的数据
			async removeuser(id) {
				// 弹框询问用户是否删除数据
				// console.log(id) 获取到了id,根据接口删除数据
				const confirmresult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch((err)=>{
					return err
				})
				
				// 如果用户确认删除，返回值为confirm 点击取消返回值为cancel
				console.log(confirmresult)
				
				if(confirmresult == 'confirm'){
					//调用删除接口
					return this.$message.success('删除成功')
				}else{
					return this.$message.info('已取消删除')
				}
				
			}



		}

	}
</script>

<style>
	.el-breadcrumb {
		font-size: 14px;
		padding-bottom: 15px;
	}

	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, .15) !important
	}

	.el-table {
		margin-top: 20px;
		font-size: 14px;
	}

	.el-pagination {
		margin-top: 20px;
	}
</style>
